<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="div">
        <span v-pre>{{msg}}</span>
        <span v-pre>{{不需要编译，直接显示}}}</span>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>

        //使用原生js，
        //获取元素
/*         var div = document.getElementById('app');
        // div.innerText = 'Hello World';
        div.innerHtml = 'Hello World'; */

        //Vue createApp({options})

        //1.选项式
        var app = Vue.createApp({
            //里面放一些数据
            data: function () {
                return {
                    msg: "Hello Vue!",
                    msg1: "1111",
                    arr: [1,2,3,4,5,6,7]
                }
            },

        }).mount('#div');
       //挂载将app挂载到
    //    app.mount("#div");

    </script>
</body>

</html>